<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    @close="closeDialog"
  >
    <el-form v-model="selectedUser" style="text-align: left" ref="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="真实姓名：" label-width="120px" prop="name">
            <label>{{ selectedUser.realName }}</label>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名" label-width="120px" prop="username">
            <el-input v-model="selectedUser.username" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号" label-width="120px" prop="phone">
            <el-input v-model="selectedUser.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" label-width="120px" prop="email">
            <el-input v-model="selectedUser.email" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="密码" label-width="120px" prop="password">
        <el-button type="warning" @click="resetPassword(selectedUser)">重置密码</el-button>
      </el-form-item>
      <el-form-item label="角色分配" label-width="120px" prop="roles">
        <el-checkbox-group v-model="selectedRolesIds">
          <el-checkbox v-for="(role,i) in roles" :key="i" :label="role.id">{{ role.nameZh }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit(selectedUser)">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "EditUser",
  data() {
    return {
      title: '',
      dialogFormVisible: false,
      selectedUser: [],
      selectedRolesIds: [],
      roles: [],
    }
  },
  methods: {
    edit(user, role) {
      var selectRole = null
      this.$axios.post('/role/selectedUserRoles', user).then(resp => {
        var result = resp.data.result
        for (let resultKey in result) {
          selectRole = result[resultKey].name
          this.selectedRolesIds.push(result[resultKey].id)
        }
        if (role === 'superAdmin') {
          this.dialogFormVisible = true
          this.selectedUser = user
        } else if (role === 'sysAdmin' && selectRole !== 'sysAdmin' && selectRole !== 'superAdmin') {
          if (selectRole !== 'superAdmin') {
            if (selectRole !== 'sysAdmin') {
              this.dialogFormVisible = true
              this.selectedUser = user
            }
          }
        } else if (role === 'userManager' && selectRole !== 'sysAdmin' && selectRole !== 'superAdmin') {
          this.dialogFormVisible = true
          this.selectedUser = user
        } else {
          this.$message('对不起,您没有权限')
        }
      })
    },

    resetPassword(user) {
      this.$axios.post('/system/user/restPassword', user).then(resp => {
        if (resp && resp.status === 200) {
          this.$message('密码重置成功，初始密码为'+user.username)
        }
      })
    },
    onSubmit(user) {
      var roles = this.selectedRolesIds
      var submitForm = {
        user: user,
        roles: roles
      }
      this.$axios.post('/system/user/edit', submitForm).then(resp => {
        if (resp && resp.status === 200) {
          this.$message('修改成功')
          this.dialogFormVisible = false
          this.$emit("reload")
        }
      })
    },
    listRole() {
      this.$axios.get('/role/menusRole').then(resp => {
        if (resp && resp.data.code === 200) {
          this.roles = resp.data.result
        }
      })
    },
    closeDialog(){
      this.dialogFormVisible = false
    }
  },
  mounted() {
    this.listRole()
  }
}
</script>

<style scoped>

</style>
